<template>
	<view class="container paddingBottomBar">
		<header-bar :config="config"></header-bar>
		<view class="order-header"></view>
		<view class="order-main">
			<selecttime-date :dayname="dayname" :num="0" :startDate="startDate" :endDate='endDate'
				@selDate="selDate"></selecttime-date>
			<!-- 			<view class="data-select">
				<view @click="dayselect">{{dayname}}<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
				<view @click="datatimeselect">{{datatime}}<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
			</view> -->
			<view class="order-data">
				<view class="order-d-title">订单成交额(元)</view>
				<view class="order-d-subtitle">
					<view class="stong">{{ info.OrderPriceTotal }}</view>
					<view>较同周期<image :src="info.AddPriceCompare > 0 ? '/static/icon/up.png' : '/static/icon/down.png'" alt="">
							<text class="iconfont">{{ info.AddPriceCompare }}%</text></view>
				</view>
				<view class="info-data">
					<view class="info-data-item info-up">
						<view>订单数</view>
						<view class="strong">{{ info.OrderTotal }}</view>
						<view class="ratio">环比<image
								:src="info.AddUserCompare > 0 ? '/static/icon/up.png' : '/static/icon/down.png'" alt="">
								<text>{{ info.AddUserCompare }}%</text></view>
					</view>
					<view class="info-data-item info-down">
						<view>客单价(元)</view>
						<view class="strong">{{ info.OrderUserPrice }}</view>
						<view class="ratio">环比<image
								:src="info.OrderUserCompare > 0 ? '/static/icon/up.png' : '/static/icon/down.png'" alt="">
								<text>{{ info.OrderUserCompare }}%</text></view>
					</view>
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">交易趋势</view>
					<selecttime-date :dayname="dayname1" :num="1" :startDate="startDate1" :endDate='endDate1'
						@selDate="selDate"></selecttime-date>
				</view>
				<view class="info-tab mt-40">
					<view :class="orderNum == 1 ? 'active' : ''" @click="orderFun(1)">订单金额</view>
					<view :class="orderNum == 2 ? 'active' : ''" @click="orderFun(2)">订单笔数</view>
					<view :class="orderNum == 3 ? 'active' : ''" @click="orderFun(3)">客户数</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">商品销售统计</view>
					<selecttime-date :dayname="dayname2" :num="2" :startDate="startDate2" :endDate='endDate2'
						@selDate="selDate"></selecttime-date>
				</view>
				<view class="charts-box mt-40">
					<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">订单分析</view>
					<selecttime-date :dayname="dayname3" :num="3" :startDate="startDate3" :endDate='endDate3'
						@selDate="selDate"></selecttime-date>
				</view>
				<view class="info-tab mt-40">
					<view :class="analystNum == 1 ? 'active' : ''" @click="analyst(1)">分类</view>
					<view :class="analystNum == 2 ? 'active' : ''" @click="analyst(2)">商品</view>
					<view :class="analystNum == 3 ? 'active' : ''" @click="analyst(3)">产品线</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">客单价分析</view>
					<selecttime-date :dayname="dayname4" :num="4" :startDate="startDate4" :endDate='endDate4'
						@selDate="selDate"></selecttime-date>
				</view>
				<view class="kedanjia">
					<view class="ke-left">
						<view>客单价</view>
						<view class="strong">{{ guestList.OrderPrice }}</view>
					</view>
					<view class="ke-right">
						<view>
							<view><text class="yuan"></text>订单平均金额</view>
							<view class="strong">{{ guestList.OrderUserPrice }}</view>
						</view>
						<view>
							<view><text class="yuan yuan1"></text>客户平均订单量</view>
							<view class="strong">{{ guestList.UserOrderAvg }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">运营数据</view>
					<!-- <view class="data-select data-select-edit">
						<view>本周<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
						<view>2024-06-01/2024.07.01<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
					</view> -->
					<selecttime-date :dayname="dayname5" :num="5" :startDate="startDate5" :endDate='endDate5'
						@selDate="selDate"></selecttime-date>
				</view>
				<view class="operation-tab mt-40">
					<view :class="operationNum == 1 ? 'active' : ''" @click="operation(1)">
						<view>访问量</view>
						<view class="strong">{{ AnalysisModel.AccessCount }}</view>
					</view>
					<view :class="operationNum == 2 ? 'active' : ''" @click="operation(2)">
						<view>注册会员数</view>
						<view class="strong">{{ AnalysisModel.RegUserCount }}</view>
					</view>
					<view :class="operationNum == 3 ? 'active' : ''" @click="operation(3)">
						<view>下单客户数</view>
						<view class="strong">{{ AnalysisModel.AddOrderUserCount }}</view>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from "vuex"
import { GetOrderUserPriceInfo } from "@/service/api/user.js"
import { GetSaleHeadInfo, GetOrderAddTrend, GetOrderByProductAnalysisInfo, GetOrderAnalysisInfo, GetAddUserGroupByDay } from "@/service/api/order.js"
import storage from "@/uni-sub-base/utils/storage.js"
import utils from "@/utils/utils.js"
import selecttimeDate from "@/components/customer/selecttime-date.vue"
export default {
	components: {
		selecttimeDate
	},
	data() {
		return {
			config: {
				title: "业务员销售分析",
				centerSlot: true,
				rightSlot: false,
				color: ["#ffffff"],
			},
			dayname: '本周',
			startDate: utils.thisWeek().startDate,
			endDate: utils.thisWeek().endDate,
			dayname1: '本周',
			startDate1: utils.thisWeek().startDate,
			endDate1: utils.thisWeek().endDate,
			dayname2: '本周',
			startDate2: utils.thisWeek().startDate,
			endDate2: utils.thisWeek().endDate,
			dayname3: '本周',
			startDate3: utils.thisWeek().startDate,
			endDate3: utils.thisWeek().endDate,
			dayname4: '本周',
			startDate4: utils.thisWeek().startDate,
			endDate4: utils.thisWeek().endDate,
			dayname5: '本周',
			startDate5: utils.thisWeek().startDate,
			endDate5: utils.thisWeek().endDate,
			dataList: [
				{
					title: "今日",
				},
				{
					title: "本周",
				},
				{
					title: "本月",
				},
				{
					title: "本年",
				},
				{
					title: "自定义",
				},
			],
			chartData: {},
			opts: {
				color: ["#F1270C"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false,
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					area: {
						type: "straight",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: false,
						activeType: "hollow"
					}
				}
			},
			chartData1: {},
			opts1: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			chartData2: {},
			opts2: {
				color: ["#F1270C", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: false,
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},
				extra: {
					column: {
						type: "group",
						width: 20,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08
					}
				}
			},
			chartData3: {},
			opts3: {
				color: ["#F1270C", "#3E70FF", "#FA8D19", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: false,
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},
				extra: {
					column: {
						type: "group",
						width: 15,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08
					}
				}
			},
			info: {},
			guestList: {},
			analystNum: 1,
			operationNum: 1,
			orderNum: 1,
			AnalysisModel: {}

		}
	},
	created() {
		let mainColor = this.easyGetColor("main")
		this.config.backgroundColor = [1, mainColor]
	},
	onLoad(e) {

	},

	mounted() {
		this.getInfo()
		this.getServerData()
		this.getServerData1()
		this.getServerData2()
		this.getServerData3()
		this.PriceInfo()
	},
	onShow() {

	},
	methods: {
		getInfo() {
			let params = {
				DateBgn: this.startDate,
				DateEnd: this.endDate
			}
			GetSaleHeadInfo(params).then((res) => {
				if (res.State == 1) {
					this.info = res.Data;
				}
			})
		},
		PriceInfo() {
			let params = {
				startDate: this.startDate4,
				endDate: this.endDate4
			}
			GetOrderUserPriceInfo(params).then((res) => {
				if (res.State == 1) {
					this.guestList = res.Data
				}
			})
		},
		analyst(num) {
			this.analystNum = num;
			this.getServerData2()
		},
		operation(num) {
			this.operationNum = num;
			this.getServerData3()
		},
		orderFun(num) {
			this.orderNum = num;
			this.getServerData()
		},
		getServerData() {
			this.chartData = {}
			//模拟从服务器获取数据时的延时
			let params = {
				DateBgn: this.startDate1,
				DateEnd: this.endDate1
			}
			GetOrderAddTrend(params).then((data) => {
				if (data.State == 1) {
					if (this.orderNum == 1) {
						let res = {
							categories: data.Data.xAxisRegList,
							series: [{
								name: "订单金额",
								data: data.Data.OrderPriceList
							},

							]
						};
						this.chartData = JSON.parse(JSON.stringify(res));
					}
					if (this.orderNum == 2) {
						let res = {
							categories: data.Data.xAxisRegList,
							series: [{
								name: "订单笔数",
								data: data.Data.OrderCountList
							},

							]
						};
						this.chartData = JSON.parse(JSON.stringify(res));
					}
					if (this.orderNum == 3) {
						let res = {
							categories: data.Data.xAxisRegList,
							series: [{
								name: "客户数",
								data: data.Data.UserList
							},

							]
						};
						this.chartData = JSON.parse(JSON.stringify(res));
					}


				}
			})
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

			}, 500);
		},
		getServerData1() {
			this.chartData1 = {}
			//模拟从服务器获取数据时的延时
			let params = {
				DateBgn: this.startDate2,
				DateEnd: this.endDate2,
				GroupType: 1
			}
			GetOrderByProductAnalysisInfo(params).then((data) => {
				if (data.State == 1) {
					let res = {
						series: [
							{
								data: data.Data
							}
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}
			})
		},
		getServerData2() {//订单分析
			this.chartData2 = {}
			let params = {
				DateBgn: this.startDate3,
				DateEnd: this.endDate3
			}
			GetOrderAnalysisInfo(params).then((data) => {
				if (data.State == 1) {
					if (this.analystNum == 1) {
						let res = {
							categories: data.Data.TypeNameList,
							series: [
								{
									name: "数值",
									data: data.Data.TypeTotalList
								}
							]
						};
						this.chartData2 = JSON.parse(JSON.stringify(res));
					} else if (this.analystNum == 2) {
						let res = {
							categories: data.Data.ProductNameList,
							series: [
								{
									name: "数值",
									data: data.Data.ProductTotalList
								}
							]
						};
						this.chartData2 = JSON.parse(JSON.stringify(res));
					} else if (this.analystNum == 3) {
						let res = {
							categories: data.Data.LineNameList,
							series: [
								{
									name: "数值",
									data: data.Data.LineTotalList
								}
							]
						};
						this.chartData2 = JSON.parse(JSON.stringify(res));
					}
				}

			})
		},
		getServerData3() {
			this.chartData3 = {}
			let params = {
				DateBgn: this.startDate5,
				DateEnd: this.endDate5,
			}
			GetAddUserGroupByDay(params).then((data) => {
				if (data.State == 1) {
					this.AnalysisModel = data.Data;
					if (this.operationNum == 1) {
						let res = {
							categories: data.Data.RegDataList,
							series: [
								{
									name: "",
									data: data.Data.AccessUserList
								}
							]
						};
						this.chartData3 = JSON.parse(JSON.stringify(res));
					}
					if (this.operationNum == 2) {
						let res = {
							categories: data.Data.RegDataList,
							series: [
								{
									name: "",
									data: data.Data.RegUserList
								}
							]
						};
						this.chartData3 = JSON.parse(JSON.stringify(res));
					}
					if (this.operationNum == 3) {
						let res = {
							categories: data.Data.RegDataList,
							series: [
								{
									name: "",
									data: data.Data.AddOrderUserList
								}
							]
						};
						this.chartData3 = JSON.parse(JSON.stringify(res));
					}


				}
			})
		},
		selDate(num, dayname, startDate, endDate) {
			console.log(num, dayname, startDate, endDate)
			if (num == 0) {
				this.dayname = dayname
				this.startDate = startDate
				this.endDate = endDate
				this.getInfo()
			} else if (num == 1) {
				this.dayname1 = dayname
				this.startDate1 = startDate
				this.endDate1 = endDate
				this.getServerData()
			} else if (num == 2) {
				this.dayname2 = dayname
				this.startDate2 = startDate
				this.endDate2 = endDate
				this.getServerData1()
			} else if (num == 3) {
				this.dayname3 = dayname
				this.startDate3 = startDate
				this.endDate3 = endDate
				this.getServerData2()
			} else if (num == 4) {
				this.dayname4 = dayname
				this.startDate4 = startDate
				this.endDate4 = endDate
				this.PriceInfo()
			} else if (num == 5) {
				this.dayname5 = dayname
				this.startDate5 = startDate
				this.endDate5 = endDate
				this.getServerData3()
			}
		},
	},
}
</script>

<style lang="scss">
.order-header {
	height: 186rpx;
	background: $app-color-main;
	border-radius: 0px 0px 40rpx 40rpx;
}

.order-main {
	margin-top: -186rpx;
	padding: 32rpx $app-page-padding $app-page-padding;
}

.data-select {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 52rpx;

	&>view {
		font-size: 28rpx;
		padding: 0 24rpx;
		background: rgba(255, 255, 255, 0.18);
		border-radius: 26rpx;
		color: #fff;
		height: 100%;
		line-height: 52rpx;
		margin-right: 12rpx;
	}

	&>view:last-child {
		margin-right: 0rpx;
	}

	.icon-black {
		padding-left: 4rpx;
	}
}

.data-select-edit {
	height: 46rpx;

	&>view {
		font-size: 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #666666;
		height: 100%;
		line-height: 46rpx;
		color: #333;
		margin-right: 12rpx;
	}
}

.order-data {
	padding: 24rpx;
	background: #fff;
	border-radius: 24rpx;
	margin-top: 26rpx;

	.order-d-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		padding-left: 8rpx;
	}

	.order-d-subtitle {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 24rpx 0 32rpx 0;

		.stong {
			font-size: 50rpx;
			font-weight: bold;
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}

.info-data {
	display: flex;
	justify-content: space-between;
}

.info-data-item {
	padding: 24rpx 30rpx;
	color: #666;
	font-size: 24rpx;
	width: 256rpx;

	.strong {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		padding: 12rpx 0;
	}

	.ratio {
		image {
			width: 24rpx;
			height: 24rpx;
			vertical-align: -4rpx;
		}

		text {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}
}

.info-up {
	background: #FFF5F4;
}

.info-down {
	background: #EFFCF7;
}

.iconfont {
	font-weight: bold;
	font-size: 30rpx;
}

.echars-data {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-top: 18rpx;

	.echars-title {
		display: flex;
		justify-content: space-between;

		.font {
			font-weight: 700;
			font-size: 28rpx;
			color: #333333
		}
	}
}

.info-tab {
	margin: 0 auto;
	width: 360rpx;
	height: 48rpx;
	background: #F5F6F7;
	border-radius: 4rpx;
	display: flex;
	justify-content: flex-start;

	&>view {
		width: 33.33%;
		font-size: 24rpx;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.active {
		width: 120rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 51, 51, 0.09);
		border-radius: 4px;
		color: #333;
		font-weight: bold;
		margin-top: 4rpx;
	}
}

.mt-40 {
	margin-top: 40rpx;
}

.charts-box {
	width: 100%;
	height: 440rpx;
	background: #fff;
}

.kedanjia {
	margin-top: 70rpx;
	display: flex;
	align-items: center;

	&>view {
		width: 50%;
	}

	.ke-left {
		text-align: center;
		font-size: 28rpx;
		color: #333333;

		.strong {
			font-weight: bold;
			font-size: 48rpx;
			color: #F1270C;
		}
	}

	.ke-right {
		line-height: 1.8;
		padding-left: 30rpx;
		font-size: 24rpx;
		color: #333333;

		.yuan {
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			background: #00B42A;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}

		.yuan1 {
			background: #FF8F37;
		}

		.strong {
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			padding-left: 24rpx;
		}
	}

}

.operation-tab {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;

	&>view {
		width: 30%;
		background: #FFF5F4;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		text-align: center;

		.strong {
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
		}
	}

	.active {
		border-bottom: 4rpx solid #F1270C;
	}
}

.pay-way-item {
	display: block !important;
	text-align: center;

	text {
		font-size: 30rpx
	}
}

.btn {
	font-size: 28rpx
}
</style>
